import React, { Component } from "react";
import { Modal } from "antd-mobile";
import { InterfaceG } from "@config/Config";
import { connect } from "react-redux";
import yhTools from "@tools/yh";
import { getPayDatas } from "@/Redux/Action/nativeDatas/nativeDatas";
import MainLayout from "@/component/mainLayout/mainLayout";
import Banner from "@/views/viewCommon/Banner";

import "./PaySuccess.scss";
const alert = Modal.alert;
class PaySuccess extends Component {
	constructor(props) {
		super(props);
		this.state = {
			bannerList: [],
			payment_time: ""
		};
	}

	componentDidMount() {
		console.log("支付结果值：", this.props.getPayDatas);
		let time = this.timestampToTime(this.props.getPayDatas.payment_time);
		this.setState({
			payment_time: time
		});
		this.getChannelBannerListNew();
		//console.log(this.props.getAppPlatformsDatas.phoneX);
	}
	timestampToTime(timestamp) {
		let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		let Y = date.getFullYear() + "-";
		let M =
			(date.getMonth() + 1 < 10
				? "0" + (date.getMonth() + 1)
				: date.getMonth() + 1) + "-";
		let D = date.getDate() + " ";
		let h = date.getHours() + ":";
		let m = date.getMinutes() + ":";
		let s = date.getSeconds();
		return Y + M + D + h + m + s;
	}
	getChannelBannerListNew = () => {
		let params = {
			url: InterfaceG.getBannerListByPageType,
			params: {
				pageType: "xhfOfflinePaySuccessPage"
			}
		};
		yhTools.request(params).then(res => {
			if (res.code === "0") {
				if (res.data && res.data.length > 0) {
					res.data.forEach(item => {
						if (item.bannerType == "bottomBanner") {
							this.setState({
								bannerList: item.indexServerDtos ? item.indexServerDtos : []
							});
						}
					});
				}
			}
		});
	};
	componentWillUnmount() {
		//console.log(getPayDatas);

		this.props._getPayDatas({
			cashBackAmount: "", //红包金额
			goodsAmount: "", //商品金额
			couponAmount: "", //优惠券金额
			amount: "", //实付金额
			storeName: "", //商户名称
			randomAmount: "", //随机立减
			payDiscountAmount: "", //优惠活动
			adListInfo: [] //bnner
		});
	}

	goToHome = () => {
		alert("是否确认放弃领取更多优惠？", "", [
			{
				text: "放弃优惠",
				onPress: () => this.redirectTo("/xhfHomeCredit"),
				style: "default"
			},
			{
				text: "立即领取",
				onPress: () => this.redirectTo("/paymentDiscount/collectCouponCenter")
			}
		]);
	};
	redirectTo = pathname => {
		this.props.history.replace({
			pathname
		});
	};
	payDetail = () => {
		window.location.replace("#/billHome");
	};
	goToSliderPage = e => {
		//bnner跳转
		this.props.history.push({
			pathname: e.link,
			state: {
				fromUrl: "/xhfHomeCredit"
			}
		});
	};

	render() {
		const { bannerList } = this.state;
		const headerParams = {
			header: {
				title: "支付结果",
				goBackPath: "/xhfHomeCredit"
			},

			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		return (
			<MainLayout pageParams={headerParams}>
				<div className="pay-success-page">
					<div className="kf-tel">
						支付遇到问题？请拨打客服热线 400-690-6663
					</div>
					<div className="content-body">
						<i className="icon-success"></i>
						<span className="pay-money-text">支付成功</span>
						<label className="pay-money-num">
							{this.props.getPayDatas.amount}
						</label>
						<div className="line-20"></div>
						<div className="custom">
							<div>
								<label>商户名称：</label>
								<span className="discount-class">
									{this.props.getPayDatas.storeName}
								</span>
							</div>
							<div>
								<label>应付金额：</label>
								<span className="discount-class">
									{this.props.getPayDatas.goodsAmount}元
								</span>
							</div>
							<div
								className={
									this.props.getPayDatas.couponAmount != 0 ? "" : "no-show"
								}
							>
								<label>支付券：</label>
								<span className="discount-class" style={{ color: "#F82633" }}>
									-{this.props.getPayDatas.couponAmount}元
								</span>
							</div>
							<div
								className={
									this.props.getPayDatas.payDiscountAmount != 0 ? "" : "no-show"
								}
							>
								<label>支付活动优惠：</label>
								<span style={{ color: "#F82633" }}>
									-{this.props.getPayDatas.payDiscountAmount}元
								</span>
							</div>
							{/* {<div className={this.props.getPayDatas.randomAmount != 0 ? "" : "no-show"}>
                            <label>随机立减：</label>
                            <span className="discount-class" style={{ color: "#F82633" }}>-{this.props.getPayDatas.randomAmount}元</span>
                        </div>} */}
							{/* <div
								className={
									this.props.getPayDatas.cashBackAmount != 0 ? "" : "no-show"
								}
							>
								<label>红包优惠：</label>
								<span style={{ color: "#F82633" }}>
									-{this.props.getPayDatas.cashBackAmount}元
								</span>
							</div> */}
							<div>
								<label>消费时间：</label>
								<span className="discount-class">
									{this.state.payment_time}
								</span>
							</div>
							<div>
								<label>永辉支付流水号：</label>
								<span className="discount-class">
									{this.props.getPayDatas.trade_no}
								</span>
							</div>
							<div>
								<label>商户订单号：</label>
								<span className="discount-class">
									{this.props.getPayDatas.out_trade_no}
								</span>
							</div>
							{/*<div>*/}
							{/*<label>实付：</label>*/}
							{/*<span className="actual-pay">&yen;{this.props.getPayDatas.amount}</span>*/}
							{/*</div>*/}
						</div>
						{/*<div>*/}
						{/*<button className="btn-full-left-blue" onClick={this.payDetail.bind(this)}>消费详情</button>*/}
						{/*<button className="btn-full-right-blue" onClick={this.goToHome.bind(this)}>返回首页</button>*/}
						{/*</div>*/}
					</div>
					<button
						className="submit-btn submit-btn-color"
						onClick={() =>
							this.redirectTo("/paymentDiscount/collectCouponCenter")
						}
					>
						领取更多优惠
					</button>
					<button
						className="submit-btn submit-btn-empty submit-btn-last"
						onClick={() => this.goToHome()}
					>
						返回首页
					</button>
					<Banner bannerList={bannerList} history={this.props.history} />
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_getPayDatas: options => {
			dispatch(getPayDatas(options));
		}
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(PaySuccess);
